window.animate_css="";
window.animations_list=[];
var animation_id=0;
function Animation(){
    this.delay=1;
    this.time=1;
    this.id=animation_id;
    this.parent=null;
    animation_id++;
    this.name="Animation";
}
Animation.prototype.init=function(parent_dom){
    this.dom=document.createElement('div');
    this.dom.classList.add('animation_attr_box');
    this.delay_input=document.createElement('input');
    this.delay_input.setAttribute('type','number');
    this.time_input=document.createElement('input');
    this.time_input.setAttribute('type','number');
    this.dom.appendChild(document.createElement("hr"));
    this.dom.innerHTML+='<span>name:Animation '+this.name+'</span><br><span>delay:</span>';
    this.dom.appendChild(this.delay_input);
    //this.dom.innerHTML+="<br><span>time:</span>";
    this.dom.appendChild(document.createElement('br'));
    this.dom.appendChild((()=>{var s=document.createElement('span');s.innerText="time:";return s;})());
    this.dom.appendChild(this.time_input);
    var del_btn=document.createElement("button");
    del_btn.innerHTML="删除";
    del_btn.classList.add('del_animation_btn');
    del_btn.onclick=(()=>{
        for(var i=0;i<this.parent.animations.length;i++){
            if(this.parent.animations[i].id==this.id){
                this.parent.animations.splice(i,1);
                this.dom.parentNode.removeChild(this.dom);
                break;
            }
        }
    }).bind(this);
    this.dom.appendChild(del_btn);
    parent_dom.appendChild(this.dom);
    this.delay_input.onchange=()=>{
        this.delay=parseInt(this.delay_input.value);
    }
    this.time_input.onchange=()=>{
        this.time=parseInt(this.time_input.value);
    }
}
Animation.prototype.update_value=function(){
    this.delay_input.value=this.delay;
    this.time_input.value=this.time;
}
Animation.prototype.to_str=function(str){
    return format(
        "<{name} delay={delay} time={time}>{str}</{name}>",
        {
            name:this.name,
            time:this.time,
            delay:this.delay,
            str:str
        }
    )
}

function add_animation(name){
    var a=new Animation();
    a.parent=current_element;
    a.name=name;
    a.init(current_element.animation_tab);
    a.update_value();
    current_element.animations.push(a);
    return a;
}
function edit_animation(){
    var el=current_element;
    if(!$('.active')){
        tip('请选中一个元素!')
        return;
    }
    window.open('../edit_animate/editanimate.html');
    window.addEventListener('message',(msg)=>{
        arr=msg.data.split('||');
        window.animate_css+=arr[1];
        add_animation(arr[0]);
        window.animations_list.push(arr[0]);
    });
    window.removeEventListener('message')
}